<template>
    <div class="bank page">
        <formHeader :title="'我的银行卡'"></formHeader>
        <div class="con">
            <div class="bankCard"
                 @click="select(item)"
                 v-for="item in bankList"
                 :key="item.id"
            >
                <div class="info">
                    <div class="gray">{{item.accName}}</div>
                    <div class="id">{{item.number}}</div>
                    <div class="gray">{{item.bank}}</div>
                </div>
                <div class="control">
                    <span @click.stop="edit(item.id,item.accName,item.number,item.bank,item.accBranch)">编辑</span> |
                    <span @click.stop="del(item.id)">删除</span>
                </div>
            </div>
        </div>
        <div class="add" @click="add">+ 使用新卡提现</div>
    </div>
</template>

<script>
    import formHeader from '@/components/form-header'
    import {getBankList,deleteBankCard} from '@/api/order'
    import eventBus from "@/common/js/eventbus"
    export default {
        name: "bank",
        components:{formHeader},
        data(){
            return{
                bankList:[]
            }
        },
        activated() {
            getBankList().then(res=>{
                this.bankList = res.data
            })
        },
        methods:{
            add(){
                this.$router.push({
                    path:'/withdraw/edit',
                    query:{
                        type:0
                    }
                })
            },
            edit(id,accName,number,bank,accBranch){
                this.$router.push({
                    path:'/withdraw/edit',
                    query:{
                        type:1,
                        id,
                        accName,
                        number,
                        bank,
                        accBranch
                    }
                })
            },
            del(id){
                deleteBankCard(id).then(res=>{
                    if(res.code==10000){
                        this.bankList.forEach((item,index)=>{
                            if (item.id==id){
                                this.bankList.splice(index,1)
                                return
                            }
                        })
                    }
                })
            },
            select(item){
                eventBus.$emit('msg',item)
                this.$router.go(-1)
            }
        }
    }
</script>

<style scoped lang="stylus">
.bank
    background $page-bg
    .con
        margin-top 57px
        .bankCard
            padding 12px
            background-color #fff
            display flex
            justify-content space-between
            margin-bottom 1px
            .info
                flex 1
                .gray
                    color #999
                    font-size 13px
                    line-height 18px
                .id
                    color #333
                    font-size 17px
                    line-height 24px
            .control
                color #f1c809
                font-size 17px
                line-height 24px
    .add
        color #666
        font-size 15px
        text-align center
        margin-top 20px
</style>